<template>
  <view class="warp">
    <eui-card is-full :is-shadow="false">
      <text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
    </eui-card>
    <eui-section title="基础样式" type="line" padding>
      <eui-grid :column="4" :highlight="true" @change="change">
        <eui-grid-item v-for="(item, index) in 4" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff;">
            <eui-icons type="image" :size="30" color="#777" />
            <text class="text">文本信息</text>
          </view>
        </eui-grid-item>
      </eui-grid>
    </eui-section>
    <eui-section title="自定义列数" type="line" padding>
      <eui-grid :column="4" :highlight="true" @change="change">
        <eui-grid-item v-for="(item, index) in 8" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff;">
            <eui-icons type="image" :size="30" color="#777" />
            <text class="text">文本信息</text>
          </view>
        </eui-grid-item>
      </eui-grid>
    </eui-section>

    <eui-section title="滑动视图" type="line" padding>
      <!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
      <swiper class="swiper" :indicator-dots="true">
        <swiper-item>
          <eui-grid :column="3" :highlight="true" @change="change">
            <eui-grid-item v-for="(item, index) in list" :index="index" :key="index">
              <view class="grid-item-box">
                <image :src="item.url" class="image" mode="aspectFill" />
                <text class="text">{{ item.text }}</text>
              </view>
            </eui-grid-item>
          </eui-grid>
        </swiper-item>
        <swiper-item>
          <eui-grid :column="3" :highlight="true" @change="change">
            <eui-grid-item v-for="(item, index) in list" :index="index" :key="index">
              <view class="grid-item-box">
                <image :src="item.url" class="image" mode="aspectFill" />
                <text class="text">{{ item.text }}</text>
              </view>
            </eui-grid-item>
          </eui-grid>
        </swiper-item>
        <swiper-item>
          <eui-grid :column="3" :highlight="true" @change="change">
            <eui-grid-item v-for="(item, index) in list" :index="index" :key="index">
              <view class="grid-item-box">
                <image :src="item.url" class="image" mode="aspectFill" />
                <text class="text">{{ item.text }}</text>
              </view>
            </eui-grid-item>
          </eui-grid>
        </swiper-item>
      </swiper>
    </eui-section>
    <eui-section title="动态加载" type="line" padding>
      <view class="grid-dynamic-box">
        <eui-grid :column="3" :highlight="true" @change="change">
          <eui-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
            <view class="grid-item-box" :style="{'backgroundColor':item.color}">
              <image :src="item.url" class="image" mode="aspectFill" />
              <text class="text">{{ item.text }}</text>
            </view>
          </eui-grid-item>
        </eui-grid>
      </view>
      <button type="primary" @click="add">点击添加一个宫格</button>
      <button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
              @click="del">点击删除一个宫格</button>
    </eui-section>
    <eui-section title="无边框带角标（3列）" type="line" padding>
      <eui-grid :column="3" :show-border="false" :square="false" @change="change">
        <eui-grid-item v-for="(item ,index) in list" :index="index" :key="index">
          <view class="grid-item-box">
            <image class="image" :src="item.url" mode="aspectFill" />
            <text class="text">{{item.text}}</text>
            <view v-if="item.badge" class="grid-dot">
              <uni-badge :text="item.badge" :type="item.type" />
            </view>
          </view>
        </eui-grid-item>
      </eui-grid>
    </eui-section>
    <eui-section title="矩形宫格（3列）" type="line" padding>
      <eui-grid :column="3" :square="false" :highlight="false" @change="change">
        <eui-grid-item v-for="(item, index) in list" :index="index" :key="index">
          <view class="grid-item-box">
            <image :src="item.url" class="image" mode="aspectFill" />
            <text class="text">{{ item.text }}</text>
          </view>
        </eui-grid-item>
      </eui-grid>
    </eui-section>
    <eui-section title="边框颜色（4列 无文字）" type="line" padding>
      <eui-grid :column="4" border-color="#03a9f4" @change="change">
        <eui-grid-item :index="0">
          <view class="grid-item-box">
            <image class="image" src="/static/c1.png" mode="aspectFill" />
          </view>
        </eui-grid-item>
        <eui-grid-item :index="1">
          <view class="grid-item-box">
            <image class="image" src="/static/c2.png" mode="aspectFill" />
          </view>
        </eui-grid-item>
        <eui-grid-item :index="2">
          <view class="grid-item-box">
            <image class="image" src="/static/c3.png" mode="aspectFill" />
          </view>
        </eui-grid-item>
        <eui-grid-item :index="3">
          <view class="grid-item-box">
            <image class="image" src="/static/c4.png" mode="aspectFill" />
          </view>
        </eui-grid-item>
      </eui-grid>
    </eui-section>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dynamicList: [],
      list: [{
        url: '/static/c1.png',
        text: 'Grid 1',
        badge: '0',
        type: "primary"
      },
        {
          url: '/static/c2.png',
          text: 'Grid 2',
          badge: '1',
          type: "success"
        },
        {
          url: '/static/c3.png',
          text: 'Grid 3',
          badge: '99',
          type: "warning"
        },
        {
          url: '/static/c4.png',
          text: 'Grid 4',
          badge: '2',
          type: "error"
        },
        {
          url: '/static/c5.png',
          text: 'Grid 5'
        },
        {
          url: '/static/c6.png',
          text: 'Grid 6'
        },
        {
          url: '/static/c7.png',
          text: 'Grid 7'
        },
        {
          url: '/static/c8.png',
          text: 'Grid 8'
        },
        {
          url: '/static/c9.png',
          text: 'Grid 9'
        }
      ]
    }
  },
  methods: {
    change(e) {
      let {
        index
      } = e.detail
      this.list[index].badge && this.list[index].badge++

      uni.showToast({
        title: `点击第${index+1}个宫格`,
        icon: 'none'
      })
    },
    add() {
      if (this.dynamicList.length < 9) {
        this.dynamicList.push({
          url: `/static/c${this.dynamicList.length+1}.png`,
          text: `Grid ${this.dynamicList.length+1}`,
          color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
        })
      } else {
        uni.showToast({
          title: '最多添加9个',
          icon: 'none'
        });
      }
    },
    del() {
      this.dynamicList.splice(this.dynamicList.length - 1, 1)
    }
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Grid"
  }
}
</route>

<style lang="scss">
.image {
  width: 50rpx;
  height: 50rpx;
}

.text {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 30rpx;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}

.grid-dot {
  position: absolute;
  top: 10rpx;
  right: 30rpx;
}

.swiper {
  height: 840rpx;
}

/* #ifdef H5 */
@media screen and (min-width: 1536rpx) and (max-width: 2850rpx) {
  .swiper {
    height: 1260rpx;
  }
}

@media screen and (min-width: 2850rpx) {
  .swiper {
    height: 1660rpx;
  }
}

/* #endif */
</style>
